
<template>
	<div class="containerAll me-listAddress">
		<div v-if="info.length < 1" v-show="false">
			<div class="order" @click="addAddress">
				<img class="left" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/address-icon.png"/>
				<span class="word">收货地址</span>
				<img class="right" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/cor_right.png"/>
			</div>
			<div class='not_tips flex-c flex-item-v-center'>
		      <img :class="iserror ? 'errororder':'noorder' " :src="iserror ? 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/error.png':'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/ic_empty.png'" />
		      <span>{{ iserror ? '网络错误，下拉刷新试试':'当前没有地址'}}</span>
		    </div>
		</div>
		
	    
		<scroller v-else ref="scroll" :on-refresh="refresh" :on-infinite="infinite" class='scroll'>
			
			<ul id="dataList" class="data-list" v-cloak>
				<li v-for="(item, index) in info">
					<p class="pd-name">{{item.name}}</p>
					<p class="pd-price">{{item.phone}} 元</p>
					<p class="pd-sold">已售{{item.phone}}件</p>
				</li>
			</ul>
			
			
			
				<swipeout>
					<swipeout-item v-for="(item, index) in info" :key=index class='item' @on-close="handleEvents('on-close')" @on-open="handleEvents('on-open')" transition-mode="follow">
						<div slot="right-menu">
							<swipeout-button @click.native="onButtonClick('fav')" type="primary">编辑</swipeout-button>
							<swipeout-button @click.native="onButtonClick('delete')" type="warn">删除</swipeout-button>
						</div>
						<div slot="content" class="demo-content vux-1px-t">
							<p class="contentPFir">
								<span>{{item.name}}</span>
								<span class="contentPhone">{{item.phone}}</span>
							</p>
							<p class="contentPSec">上海市浦东新区锦绣路3088弄</p>
						</div>
					</swipeout-item>
					
				</swipeout>

		</scroller>
		
		
		
		
		<div class="addAdress" @click="addAddress">
			新增收货地址
		</div>
	</div>
	
</template>

<script>
	import { mapState, mapActions } from 'vuex'
	import http from '@/util/http'
	import Api from '@/util/api'
	export default {
		data() {
			return {
				info: [
					
				],
				iserror: false
			}
		},
		mounted: function() {
			this.listAddressInit()
		},
		components: {
			
		},
		computed: {
			...mapState ({
				a: state => state.listAddress
			})
		},
		methods: {
			...mapActions({
		 		listAddressInit: 'listAddress/init'
		 	}),
		 	addAddress () {
		 		console.log(111)
		 		this.$router.push("/add-address");
		 	},
			refresh(done) {
				setTimeout(() => {
					this.info.unshift({"name":'鱼饼0','phone':'13127657698','adress':'浦东新区锦绣路3088弄'})
					done();
					
				}, 1500)
			},

			infinite(done) {
				setTimeout(() => {
					this.info.push({"name":'鱼饼4','phone':'13127657698','adress':'浦东新区锦绣路3088弄'})
					if (this.info.length == 5) {
						this.$refs.scroll.finishInfinite(2);
						return;
					}
					done()
				}, 1500)
			}
		}
	}
</script>

<style lang="less" rel="stylesheet/less">
		@import '../../assets/less/index.less';
		@import '../../assets/less/main.less';
		.marginT{
			margin-top: .18rem;
		}
		.order{
				height: 1.22rem;
				line-height: 1.22rem;
				position: relative;
				background: #FFFFFF;
				.left{
					width: .5rem;
					height: .5rem;
					position: absolute;
					left: .3rem;
					top: .36rem;
				}
				.word{
					margin-left: .98rem;
					font-size: .32rem;
					color: #464646;
				}
				.right{
					position: absolute;
					width: .4rem;
					height: .4rem;
					right: .2rem;
					top: .41rem;
				}
			}
		.not_tips {
		  width: 100%;
		  display: flex;
		  position: relative;
		  span {
			  padding: .2rem 0;
			  font-size: .2rem;
			  color: #909090;
			}
		}
		.noorder {
		  width: 2.05rem;
		  height: 2.05rem;
		  margin-top: 30%;
		}
		
		.errororder {
		  width: 2.05rem;
		  height: 2.05rem;
		  margin-top: 30%;
		}
		
		.me-listAddress{
			
			.scroll,#outer-llfdq{
				height: 3rem;
				.item{
					height: .82rem;
					padding: .2rem .3rem;
					background: #FFFFFF;
					.contentPFir{
						height: .4rem;
						line-height: .4rem;
						font-size: .28rem;
						color: #464646;
						.contentPhone{
							margin-left: .36rem;
						}
					}
					.contentPSec{
						margin-top: .06rem;
						height: .33rem;
						line-height: .33rem;
						color: #909090;
						font-size: .24rem;
					}
				}
			}
			
			.addAdress{
				width: 100%;
				height: 1rem;
				line-height: 1rem;
				background: #FBC200;
				position: absolute;
				bottom: 0;
				text-align: center;
				color: #464646;
				font-size: .32rem;
			}
		}
</style>





